﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/DeviceManage/index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ShellManage/shell.css"))
}
    <div class="container-div" id="ohterDeviceAlarm-vue">
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="ManipulatorAlarm">
                    <el-card>
                        <div slot="header" class="myhead">
                            <div>机器人报警</div>
                        </div>
                        <div>
                            <div class="my-p">
                                <div class="my-p-l">机器人存在报警</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':manipulatorAlarm.HasAlarm}]"></span>
                                </div>
                            </div>
                            <div class="my-p">
                                <div class="my-p-l">机器人自动模式</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':manipulatorAlarm.AtAuto}]"></span>
                                </div>
                            </div>
                            <div class="my-p">
                                <div class="my-p-l">手动T1模式</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':manipulatorAlarm.MaunalT1}]"></span>
                                </div>
                            </div>
                            <div class="my-p">
                                <div class="my-p-l">手动T2模式</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':manipulatorAlarm.ManualT2}]"></span>
                                </div>
                            </div>
                            <div class="my-p">
                                <div class="my-p-l">机器人在原位</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':manipulatorAlarm.AtInitPosition}]"></span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="LaserMarkAlarm">
                    <el-card>
                        <div slot="header" class="myhead">
                            <div>激光打码报警</div>
                        </div>
                        <div>
                            <div class="my-p">
                                <div class="my-p-l">打标机数据非法或格式不正常</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':laserMarkAlarm.DataPatternError}]"></span>
                                </div>
                            </div>
                            <div class="my-p">
                                <div class="my-p-l">打标机初始化失败</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':laserMarkAlarm.InitFailed}]"></span>
                                </div>
                            </div>
                            <div class="my-p">
                                <div class="my-p-l">打标失败</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':laserMarkAlarm.MarkFailed}]"></span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px">
            <el-col :span="12">
                <div class="WashMachineAlarm">
                    <el-card>
                        <div slot="header" class="myhead">
                            <div>孔深测量报警</div>
                        </div>
                        <div>
                            <div class="my-p">
                                <div class="my-p-l">存在报警</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':holeDepthMeasureAlarm.HasAlarm}]"></span>
                                </div>
                            </div>
                            <div class="my-p">
                                <div class="my-p-l">存在错误</div>
                                <div class="my-p-r">
                                    <span :class="['mycomLight',{'myTrueActive':holeDepthMeasureAlarm.HasError}]"></span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>

    <script>
    let app = new Vue({
        el: '#ohterDeviceAlarm-vue',
        data: {
            // 机器人报警数据
            manipulatorAlarm: {
                HasAlarm: null,
                AtAuto: null,
                MaunalT1: null,
                ManualT2: null,
                AtInitPosition: null
            },
            // 激光打码报警数据
            laserMarkAlarm: {
                DataPatternError: null,
                InitFailed: null,
                MarkFailed: null
            },
            // 孔深测量报警
            holeDepthMeasureAlarm: {
                HasAlarm: null,
                HasError: null
            },
        },
        methods: {
            // 获取报警数据
            getDeviceAlarm() {
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/getOtherDeviceAlarm")'
                axios.get(url).then(res => {
                    this.handleResult(res.data)
                }).catch(err => {
                    console.log(err)
                })
            },
            // 处理得到的结果数据
            handleResult(result) {
                if (result.manipulator != null) {
                    if (this.manipulatorAlarm.HasAlarm != result.manipulator.HasAlarm) {
                        this.manipulatorAlarm.HasAlarm = result.manipulator.HasAlarm
                    }
                    if (this.manipulatorAlarm.AtAuto != result.manipulator.AtAuto) {
                        this.manipulatorAlarm.AtAuto = result.manipulator.AtAuto
                    }
                    if (this.manipulatorAlarm.MaunalT1 != result.manipulator.MaunalT1) {
                        this.manipulatorAlarm.MaunalT1 = result.manipulator.MaunalT1
                    }
                    if (this.manipulatorAlarm.ManualT2 != result.manipulator.ManualT2) {
                        this.manipulatorAlarm.ManualT2 = result.manipulator.ManualT2
                    }
                    if (this.manipulatorAlarm.AtInitPosition != result.manipulator.AtInitPosition) {
                        this.manipulatorAlarm.AtInitPosition = result.manipulator.AtInitPosition
                    }
                }
                if (result.laserMark != null) {
                    if (this.laserMarkAlarm.DataPatternError != result.laserMark.DataPatternError) {
                        this.laserMarkAlarm.DataPatternError = result.laserMark.DataPatternError
                    }
                    if (this.laserMarkAlarm.InitFailed != result.laserMark.InitFailed) {
                        this.laserMarkAlarm.InitFailed = result.laserMark.InitFailed
                    }
                    if (this.laserMarkAlarm.MarkFailed != result.laserMark.MarkFailed) {
                        this.laserMarkAlarm.MarkFailed = result.laserMark.MarkFailed
                    }
                }
                if (result.washMachine != null) {
                    if (this.holeDepthMeasureAlarm.HasAlarm != result.holeDepthMeasure.HasAlarm) {
                        this.holeDepthMeasureAlarm.HasAlarm = result.holeDepthMeasure.HasAlarm
                    }
                    if (this.holeDepthMeasureAlarm.HasError != result.holeDepthMeasure.HasError) {
                        this.holeDepthMeasureAlarm.HasError = result.holeDepthMeasure.HasError
                    }
                }
            }
        },
        mounted() {
            this.getDeviceAlarm()
        }
    })
    </script>

